ARCoreの新機能「Scene Viewer」を試してみた #io19 #io19jp

Google I/O 2019のキーノートで、Google検索の結果に表示されたサメの3DモデルをARで表示するデモが行われました。

この記事では、そのデモで使用されているARCore 1.9の新機能「Scene Viewer」を試すための手順を記載します。

Scene Viewerとは

Scene Viewerを使用することで、ARCoreがサポートしているAndroid端末上のブラウザから、手軽にARで現実世界に3Dモデルを表示できます。

iOSのAR Quick Lookという機能と似ていますね。

Google I/O 2019の関連セッション

• Google Keynote (Google I/O'19) - YouTube
• What’s New in ARCore (Google I/O'19) - YouTube
• Next-Generation 3D Graphics on the Web (Google I/O ’19) - YouTube

デモページを表示する

<model-viewer>というWeb Componentsで表示されている3Dモデルのビューアを経由して、ARCoreのScene Viewerを起動できます。厳密には、次のようにar属性が指定されている必要があります。

<model-viewer ar alt="A 3D model of an astronaut." src="Astronaut.gltf"></model-viewer>

今回は試したいだけなので、以下のWebページをARCoreのサポート端末で表示します。この記事ではPixel 3aを使用しました。

• <model-viewer> Augmented Reality

Scene Viewerを起動する

表示されたWebページの右下のARのマークをタップします。

次に、周囲のスペースに表示するをタップします。

すると、ARCoreのScene Viewerが起動します。初回起動時（と、許可した権限をあとで取り消した場合）はカメラとストレージへのアクセス許可を求められるので、すべて許可します。

3Dモデルを表示する

最初は3Dモデルが表示されません。画面の指示通りに、平らな床などにカメラを向けて回します。

少しすると、宇宙飛行士が表示されました。

操作方法

• 拡大・縮小：ピンチイン・ピンチアウト
• 回転：3Dモデルの周囲を1本指でまわす、または2つの指で回転
• 移動：ドラッグ

さいごに

今回、Scene Viewerを起動するために使用した<model-viewer>というWeb ComponentsはiOSのAR Quick Lookにも対応しています。

今後はAndroidとiOSユーザーに同じAR体験を提供することができますね。

参考

• GoogleWebComponents/model-viewer: Easily display interactive 3D models on the web and in AR!
• <model-viewer> Augmented Reality
• <model-viewer>
• ARCore1.9の新機能一覧と、WebブラウザでARがつかえるScene Viewerの環境構築手順 - CrossRoad